<?php
Yii::app()->clientScript->registerScriptFile('js/highcharts.js', CClientScript::POS_END);
Yii::app()->clientScript->registerScriptFile('js/exporting.js', CClientScript::POS_END);
?>
<div style="width:100%;overflow-x:auto;">
<div id="container" style="min-width:<?php echo count($data)*2*20?>px;height:400px;margin:0 auto;">
</div>
</div>
<script>

$(function () {
    var chart1, chart2;
    $(document).ready(function() {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: '电池历史测量轨迹统计图'
            },
            xAxis: {
                categories: [
                             <?php foreach ($data as $val){
                                 echo $val["INTER_N"].',';
                                 
                                 } ?>
                ],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '预估容量'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ '内阻: ' + this.x +'</b><br/>'+
                        '预估容量: '+ Highcharts.numberFormat(this.y, 1)  ;
                }
            },
                series: [{
                name: '预估容量',
                data: [
                <?php foreach ($data as $val){
                echo $val["FORCASTVOLUME_N"].',';
                
                } ?>
],

                dataLabels: { 
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: -3,
                    y: 10,
                    formatter: function() {
                        return this.y;
                    },
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            }]
        });

        
    });
    
});

</script>